<template>
  <div class="sales">
    <!-- 头部 -->
    <div class="top">
      <div class="lt">
        <span style="padding-right: 10px">筛选状态</span>
        <el-select v-model="value" class="m-2" placeholder="全部" size="large">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <span style="padding: 0 10px 0 25px">秒杀编号</span>
        <el-input v-model="input" placeholder="" style="width: 150px" />
        <span style="padding: 0 10px 0 25px">秒杀名称</span>
        <el-input v-model="input1" placeholder="" style="width: 150px" />
      </div>
      <div class="btn">
        <el-button type="danger" plain @click="check">查询</el-button>
        <el-button plain @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 新增 -->
    <div class="new">
      <el-button type="danger" plain @click="go">+ 新增秒杀</el-button>
      <el-button plain @click="batch">批量终止</el-button>
      <el-button plain @click="remo">批量删除</el-button>
    </div>
    <!-- 表格 -->
    <div class="sales-table">
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @select="checkbox"
        @select-all="all"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="秒杀编号" width="120">
        </el-table-column>
        <el-table-column property="name" label="秒杀名称" width="120">
          <template #default="scope">
            <el-input v-model="put.name" v-if="scope.row.cl"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          property="relation"
          label="关联商品"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-input v-model="put.relation" v-if="scope.row.cl"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="start" label="开始时间" width="120">
          <template #default="scope">
            <el-input v-model="put.start" v-if="scope.row.cl"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="end" label="结束时间" width="120">
          <template #default="scope">
            <el-input v-model="put.end" v-if="scope.row.cl"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="activity" label="活动时间" width="120">
          <template #default="scope">
            <el-input v-model="put.activity" v-if="scope.row.cl"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="state" label="状态" width="120">
          <template #default="scope">
            <el-input v-model="put.state" v-if="scope.row.cl"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="num" label="限购状态" width="120">
          <template #default="scope">
            <el-input v-model="put.num" v-if="scope.row.cl"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              type="danger"
              plain
              size="small"
              v-if="scope.row.cl === false"
              @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              plain
              size="small"
              v-else
              @click="handle(scope.$index, scope.row)"
              >完成</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:page-size="pageSize"
        v-model:currentPage="currentPage"
        :small="small"
        :disabled="disabled"
        :page-sizes="['10', '10', '10']"
        :background="background"
        layout=" prev, pager,
      next, sizes, jumper"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed, reactive } from "vue";
import { ElTable, ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
interface User {
  id: string;
  name: string;
  relation: string;
  start: string;
  end: string;
  activity: string;
  state: string;
  num: string;
  boo: boolean;
  cl: boolean;
}

export default defineComponent({
  setup() {
    const value = ref("");
    const input = ref("");
    const input1 = ref("");
    // 选项
    const options = ref([
      {
        value: "已过期",
        label: "已过期",
      },
      {
        value: "进行中",
        label: "进行中",
      },
    ]);
    // 表格
    const multipleTableRef = ref<InstanceType<typeof ElTable>>();
    // 分页
    // const currentPage = ref();
    // const pageSize = ref(1);

    // 分页
    const currentPage = computed(() => store.state.sales.currentPage);
    const pageSize = computed(() => store.state.sales.pageSize);
    const small = ref(false);
    const background = ref(true);
    const disabled = ref(false);
    const pageTotal = computed(() => store.state.sales.pageTotal);
    // 条数
    const handleSizeChange = (val: number) => {
      // console.log(`${val} items per page`);
      // console.log(val);
      console.log(`${val} 条数据`);

      store.commit("sales/handelsize", val);
    };
    const handleCurrentChange = (val: number) => {
      // console.log(val);
      console.log(`当前页: ${val}`);
      store.commit("sales/handelchange", val);
    };
    // vuex
    onMounted(() => {
      store.dispatch("sales/getsalesAsync");
    });

    // 判断是否勾选
    function checkbox(selection: any, row: User) {
      let selected = selection.indexOf(row) !== -1;
      if (selected) {
        row.boo = true;
        // console.log(row);
        // console.log(row.boo);
        console.log(pageTotal);
      } else {
        row.boo = false;
        // console.log(row.boo);
      }
    }
    // 手动全选
    const all = (selection: any) => {
      store.commit("sales/all", selection);
    };
    // 批量终止
    const batch = (selection: any) => {
      store.commit("sales/bacth");
      // checkbox(selection: any, row: User);
      // console.log(selection);
      // 全选
      store.commit("sales/all", selection);
    };
    // 批量删除
    const remo = (selection: any) => {
      store.commit("sales/c");
      // 全选
      store.commit("sales/all", selection);
    };
    // 查询
    const check = () => {
      store.commit("sales/check", {
        input: input.value,
        name: input1.value,
        value: value.value,
      });
      input.value = "";
      input1.value = "";
      value.value = "";
      console.log(value);
    };
    // 重置
    const reset = () => {
      store.dispatch("sales/getsalesAsync");
    };

    const store = useStore();
    // 表格渲染
    let tableData = computed(() => {
      return store.state.sales.salesclice;
    });

    // 编辑按钮弹出框的初始值
    const put = reactive({
      name: "",
      relation: "",
      start: "",
      end: "",
      activity: "",
      state: "",
      num: "",
    });
    // 表格里面修改按钮
    const handleEdit = (index: number, row: User) => {
      row.cl = !row.cl;
      put.name = row.name;
      put.relation = row.relation;
      put.start = row.start;
      put.end = row.end;
      put.activity = row.activity;
      put.state = row.state;
      put.num = row.num;
    };
    // 完成按钮
    const handle = (index: number, row: User) => {
      row.cl = !row.cl;
      store.commit("sales/complete", { row, put });
      // console.log(put.name);
      put.name = "";
      put.relation = "";
      put.start = "";
      put.end = "";
      put.activity = "";
      put.state = "";
      put.num = "";
    };
    // 表格里面删除
    const handleDelete = (index: number, row: User) => {
      ElMessageBox.confirm("你确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "不确定",
      })
        .then(() => {
          store.commit("sales/remove", row.id);
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "删除失败",
          });
        });
      // console.log(row);
    };
    // 跳转新增促销页面
    const router = useRouter();
    const go = () => {
      router.push("/home/addsales");
    };
    return {
      options,
      value,
      input,
      input1,
      tableData,
      multipleTableRef,
      put,
      // 删除
      handleEdit,
      // 完成按钮
      handle,
      handleDelete,
      // 批量终止
      batch,
      // 批量删除
      remo,
      // 判断勾选
      checkbox,
      // 查询id
      check,
      // 重置
      reset,
      // 全选
      all,
      //   分页
      currentPage,
      pageSize,
      background,
      disabled,
      small,
      handleCurrentChange,
      handleSizeChange,
      // 新增促销
      go,
      pageTotal,
    };
  },
});
</script>

<style lang="less" scoped>
.sales {
  background: #fff;
  margin-right: 10px;
  padding: 10px;
  border-radius: 20px;
  width: 100%;
  height: 100vh;
  min-width: 1217px;
  .top {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 18px;
      // padding: 0 20px;
    }
    .btn {
      min-width: 132px;
    }
  }
}
.new {
  padding: 30px 0;
}
// 表格
/deep/.el-table__header-wrapper .el-table__cell {
  background: #fff0ee;
}
// 分页
.demo-pagination-block {
  margin-top: 30px;
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
/deep/.el-pagination__sizes {
  margin-left: 25px;
}
</style>
